<template>
  <div class="sidebar">
    <el-menu
      class="el-menu-vertical-demo"
      background-color="#304156"
      text-color="#bfcbd9"
      active-text-color="#409EFF"
      :collapse="collapse"
      :unique-opened="true"
      :collapse-transition="false"
    >
      <div style="color: #ffffff; margin-top: 15px">
        <el-upload
          class="upload-demo"
          action="/admin/upload"
          :show-file-list="false"
          :headers="headers"
          :before-upload="beforeAvatarUpload"
          :on-success="handleAvatarSuccess"
        >
          <el-avatar :size="50" :src="url"></el-avatar>
        </el-upload>
        <h4 style="z-index: 1">校园招聘后台管理系统</h4>
      </div>
      <template v-for="(item, index) in routes">
        <el-submenu :index="index + ''" :key="index" v-if="!item.hidden">
          <template slot="title"
            ><div style="margin-right: 35%">
              <i :class="item.icon"></i>&nbsp;{{ item.name }}
            </div></template
          >
          <template v-for="(children, index) in item.children">
            <el-menu-item
              :index="children.path"
              v-if="children.name == '学校官网'"
              :key="index"
              ><i :class="children.icon"></i>&nbsp;<a
                href="https://www.tzpc.edu.cn/"
                target="_blank"
                >{{ children.name }}</a
              ></el-menu-item
            >
            <el-menu-item :index="children.path" v-else :key="index"
              ><i :class="children.icon"></i>&nbsp;<router-link
                :to="children.path"
                >{{ children.name }}</router-link
              ></el-menu-item
            >
          </template>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      collapse: false,
      url: JSON.parse(sessionStorage.getItem("user")).img,
    };
  },
  computed: {
    routes() {
      return this.$store.state.routes;
    },
    headers() {
      return { Authorization: sessionStorage.getItem("tokenStr") };
    },
  },
  methods: {
    beforeAvatarUpload(file) {
      var testMsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      if (testMsg != "jpg" && testMsg != "jpeg" && testMsg != "png") {
        this.$message({
          message: "上传文件只能是jpg、jpeg、png格式",
          type: "error",
        });
        return false;
      }
      return true;
    },
    handleAvatarSuccess(res) {
      if (res.code == 200) {
        sessionStorage.setItem("user", JSON.stringify(res.data));
        this.$message.success(res.message);
      } else {
        this.$message.error(res.message);
      }
    },
  },
};
</script>

<style scoped>
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 13.7%;
  z-index: 1;
  height: 100%;
  overflow-y: scroll;
}

.sidebar::-webkit-scrollbar {
  width: 0;
}

.router-link-active {
  text-decoration: none;
  color: #bfcbd9;
}
a {
  text-decoration: none;
  color: #bfcbd9;
}

.sidebar-el-menu:not(.el-menu--collapse) {
  width: 200px;
}

.sidebar > ul {
  height: 100%;
}
</style>